<template>
    <div class="flex items-center justify-center">
      <!-- 圆圈 -->
      <svg :width="size" :height="size" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2" fill="none" />
          <path v-if="type === 'check'" d="M6 12l4 4l8 -8" :stroke="color" stroke-width="2" fill="none" />
          <path v-else-if="type === 'cross'" d="M8 8l8 8M8 16l8-8" :stroke="color" stroke-width="2" fill="none" />
      </svg>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue';
  import { defineProps } from 'vue';
  
  interface Props {
    size: string | number;
    type: 'check' | 'cross';
  }
  
  const props = defineProps<Props>();
  
  const color = computed(() => {
    return props.type === 'check' ? 'green' : 'red';
  });
  </script>
  
  <style scoped>
  /* 你可以在这里添加一些样式 */
  </style>